<%@ page import="com.beans.CateInfo" %>
<%@ page import="com.dao.CateDao" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/maintable.css" />
    <script>
        $(function () {
            $("#ch_checkall,#top_ch_checkall").click(function () {
                if (this.checked) {
                    $("input[name=ck_id]").attr("checked", "checked");
                } else {
                    $("input[name=ck_id]").removeAttr("checked");
                }
            });

            $("table tr").mouseover(function () {
                $(this).css("background", "#D3EAEF");
                $(this).siblings().css("background", "white");
            });
            //初始化下拉框
            $(function(){
                $("#bigCateId").change(function(){
                    if(this.value=="0"){
                        $("#smallCateId").html("<option value='0'>小分类</option>");
                        return;
                    }
                    $.ajax({
                        url:"CateServlet.do",
                        type:"POST",
                        async:false,
                        dataType:"json",
                        data:{bigcateid:this.value,flag:"listSmallcate"},
                        success:function(cateList){
                            $("#smallCateId").empty();
                            $.each(cateList,function(key,cateInfo){
                                var optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
                                $("#smallCateId").append(optionStr);
                            });
                        }
                    });

                });
                //如果是页面回发,要让列表框选中原来选中的值(在ie6中还有 一些问题,要进行处理)
                $("#bigCateId").val("${param.bigCateId}");
                $("#bigCateId").change();
                $("#smallCateId").val("${param.smallCateId}");
            });
        });
        function subForm(pageIndex) {
            document.form1.action= "GoodsServlet.do?flag=manage&pageIndex=" + pageIndex;
            document.form1.submit();
        }
        function subForm1() {
            var pageIndex=document.getElementById("pageIndex").value;
            subForm(pageIndex);
        }
        function delMuti(){
            //判断用户至少选了一项
            if($("input[name=ck_id]:checked").size()==0){
                alert("请至少选一项!");
            }
            else{
                if(confirm('确定要删除所选项吗')){
                    document.form1.action="GoodsServlet.do?flag=delAll";
                    document.form1.submit();
                }
            }
        }
        function del(goodsId){
            if(confirm('确定要删除该商品吗')){
                window.location.href="GoodsServlet.do?flag=del&goodsId="+goodsId;
            }
        }
        function getElemPos(obj) {
            var pos = {
                "top" : 0,
                "left" : 0
            };
            if (obj.offsetParent) {
                while (obj.offsetParent) {
                    pos.top += obj.offsetTop;
                    pos.left += obj.offsetLeft;
                    obj = obj.offsetParent;
                }
            } else if (obj.x) {
                pos.left += obj.x;
            } else if (obj.x) {
                pos.top += obj.y;
            }

            return {
                x : pos.left,
                y : pos.top
            };

        }
        function showDetails(item, goodsId, desc) {
            var position = getElemPos(item);
            $("#div_goods_detail").show();
            $("#div_goods_detail").css("left", position.x - 150).css("top",position.y);

            $("#goods_picture").attr("src","GoodsServlet.do?flag=showPicture&goodsId="+goodsId);
            $("#div_imgdesc").html("<center>" + desc + "</center>");
        }


        //隐藏商品图片div
        function hideDetails() {
            $("#div_goods_detail").hide();
        }
    </script>

    <style>
        .div_tools{
            width:99.5%;
            height:28px;
            background:#D3EAEF;
            margin:0px auto;
            margin-top:5px;
            margin-bottom:5px;
            font-size:12px;
            position:relative;

        }

        .div_tools select{
            height:22px;
            font-size:12px;
            margin-top:3px;
        }

        #btnsubmit{
            width:40px;
            height:20px;
            font-size:12px;
        }

        /*显示图片*/
        #div_goods_detail{
            display:none;
            position: absolute;
        }
    </style>
</head>
<body>
<div class ="div_title">
    <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品列表</span></div>
    <div class="div_titleoper">
        <input type="checkbox" id="top_ch_checkall"/> 全选 <a href="goods/goods_add.jsp"> <img src="images/add.gif"/>添加 </a> <a href="javascript:delMuti()"><img src="images/del.gif"/>删除</a> <a href="#"> <img src="images/edit.gif"/>编辑 </a></div>
</div>

<form name="form1" method="post" action="GoodsServlet.do">
    <input type="hidden" name="flag" value="manage">
    <div class="div_tools">
        &nbsp; &nbsp; &nbsp;
        <%
            List<CateInfo> cateList = new CateDao().getCateList(0);
            request.setAttribute("cateList", cateList);
        %>
        <select name="bigCateId" id="bigCateId">
            <option value="0">大分类</option>
            <c:forEach var="cate" items="${cateList}">
                <option value="${cate.id }">${cate.cateName }</option>
            </c:forEach>
        </select>
        &nbsp;
        <select name="smallCateId" id="smallCateId">
            <option value="0">小分类</option>
        </select>
        &nbsp; &nbsp; &nbsp;商品名称: <input type="text" name="goodsName" value="${param.goodsName }"/>
        <input id="btnsubmit" type="submit" value="查询"/>
    </div>
    <table class="main_table">
        <tr>
            <th><input type="checkbox" id="ch_checkall"/></th>
            <th>名称</th>
            <th>单位</th>
            <th>单价</th>
            <th>大分类</th>
            <th>小分类</th>
            <!-- 	<th>说明</th>  -->
            <th>操作</th>
        </tr>
        <c:forEach var="goods" items="${goodsList}">
            <tr>
                <td>
                    <input type="checkbox" name="ck_id" value="${goods.id}"/>
                </td>
                <td>${goods.goodsName }</td>

                <td>${goods.unit }</td>

                <td>${goods.price }</td>
                <td>${goods.bigCateName }</td>
                <td>${goods.smallCateName }</td>
                    <%-- 	<td>${goods.des }</td> --%>

                <td>
                    <a href="javascript:void(0)"
                       onmouseover="showDetails(this,'${goods.id }','${goods.des }')"
                       onmouseout="hideDetails()"
                    >查看</a> |

                    <a href="goods/goods_edit.jsp?goodsId=${goods.id }">修改</a> |

                    <a href="javascript:del(${goods.id })">删除</a>

                </td>
            </tr>
        </c:forEach>
    </table>

    <div id="div_goods_detail">
        <img id="goods_picture" width="140" height="190" />
        <div id="div_imgdesc"></div>
    </div>
</form>
<div class="div_page" >
    <div class="div_page_left">    共有 <label>${pageInfo.rowCount }</label> 条记录，当前第 <label>${pageInfo.pageIndex }</label> 页，共 <label>${pageInfo.pageCount }</label> 页	</div>

    <div class="div_page_right" >
        <c:choose>

            <c:when test="${pageInfo.hasUp }" >
                <button onclick="subForm(1)" >首页</button>
                <button onclick="subForm(${pageInfo.pageIndex-1})">上一页</button>
            </c:when>

            <c:otherwise>
                首页
                上一页
            </c:otherwise>

        </c:choose>

        <c:choose>

            <c:when test="${pageInfo.hasNext}" >
                <button onclick="subForm(${pageInfo.pageIndex+1})">下一页</button>
                <button onclick="subForm(${pageInfo.pageCount})">尾页</button>
            </c:when>

            <c:otherwise>
                下一页
                尾页
            </c:otherwise>
        </c:choose>

        <button onclick="subForm1()">转到</button>
        <input type="text" name="pageIndex" id="pageIndex" value="${pageInfo.pageIndex }" /> 页
    </div>

</div>
</body>
</html>
